<div
#anchorRef
[style.left.px]="LogicPubSub.options.X"
[style.top.px]="LogicPubSub.options.Y"
>
    <template #conn></template>
    <div class="img-container" (mousedown)="handleMousedown( $event )" (touchstart)="handleMousedown($event)"
    (click)="handleClick($event)">
        <img src="./assets/pubsub.svg">
    </div>   
</div>
<div style="display:none">
    <div #options>
        <div class="options-container">
            <div class="options-endpoints-container">
                <div class="options-endpoints-top">
                    <span class="property-name">Topics: <info-tooltip [Message]="'List of available topics the PubSub can publish data to.'"></info-tooltip></span>
                    <span class="button-icon" (click)="addEndpoint()"><i class="fas fa-plus"></i></span>
                </div>
                <div class="options-endpoints">
                    <div class="options-endpoint" *ngFor="let endpoint of this.LogicPubSub.options.endpoints">
                        <input (change)="afterChange()" (blur)="handleEndpointUrlChange(endpoint)" class="endpoint-url" type="text" spellcheck="false" [(ngModel)]="endpoint.url" placeholder="url">
                        <span class="button-icon remove-endpoint" (click)="removeEndpoint(endpoint)"><i class="fas fa-minus"></i></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div #simulations>
        <slider-described
        [Model]="LogicPubSub"
        [AfterChange]="afterChange"
        ></slider-described>
    </div>
</div>